<!--  商品的list页面-->
<template>
  <div class="goods-list">
    <!-- 引入头部 -->
    <goods-header @changelist="changelistFun"></goods-header>
    <!-- tabs -->
    <goods-tabs @openpopFun="fatherPop"></goods-tabs>
    <!-- 右面的部分内容的弹出 -->
    <mt-popup v-model="popupVisible" position="right">
      <div class="goods-transition">
        <div class="title">价格区间</div>
        <div class="price-wrap">
          <input type="text" placeholder="最低价" />
          <span></span>
          <input type="text" placeholder="最高价" />
        </div>
        <div class="title">品牌</div>
        <div class="container">
          <ul class="brand">
            <li class="active">猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
          </ul>
        </div>
        <div class="footer">
          <button class="reset">重置</button>
          <button class="ok" @click="closepop">确定</button>
        </div>
      </div>
    </mt-popup>
    <!-- 商品内容 -->
    <list :goodslistdatas="goodslistdatas" :flag="fatherFlag"></list>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import GoodsHeader from "./components/GoodsHeader.vue";
import GoodsTabs from "./components/GoodsTabs.vue";
import List from "@/components/List";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { GoodsHeader, GoodsTabs, List },
  data() {
    //这里存放数据
    return {
      goodslistdatas: [
        {
          id: 1,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
        {
          id: 2,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
        {
          id: 3,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
        {
          id: 4,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
        {
          id: 5,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
        {
          id: 6,
          pic: "https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536605332768.jpg",
          title:
            "艾伦 Y700平板电脑12寸超薄智能wifi二合一10新款高清三星屏吃鸡游戏",
          shopPrice: 10.23,
        },
      ],
      fatherFlag: true,
      popupVisible: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changelistFun(data) {
      this.fatherFlag = data;
    },
    fatherPop(data) {
      this.popupVisible = data;
    },
    closepop() {
      this.popupVisible = false;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less">
.goods-list {
  .mint-popup {
    width: 90%;
    height: 100%;
    .goods-transition {
      .title {
        line-height: 4.4rem;
        text-indent: 1rem;
        font-size: 1.6rem;
        font-weight: bold;
      }
      .price-wrap {
        width: calc(100% - 2rem);
        margin: 1rem auto;
        display: flex;
        height: 4rem;
        justify-content: space-between;
        padding: 1rem;
        align-items: center;
        input {
          width: 14.4rem;
          height: 4rem;
          background: #f2f2f2;
          border-radius: 2rem;
          text-align: center;
        }
        span {
          margin: 0 10px;
          height: 1px;
          background: #000;
          width: 10px;
        }
      }
      .brand {
        display: flex;
        flex-wrap: wrap;
        li {
          width: calc(33.33% - 1rem);
          margin: 0.5rem;
          text-align: center;
          line-height: 3.6rem;
          height: 3.6rem;
          background: #f2f2f2;
          border-radius: 2.2rem;
          font-size: 1.5rem;
          box-sizing: border-box;
        }
        .active {
          border: 0.1rem solid #e93422;
          color: #e93422;
          background-color: #faeeec;
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5rem;
        text-align: center;
        button {
          width: 40%;
          height: 4.2rem;
          margin: 0.3rem 1rem;
          border-radius: 2.2rem;
          font-size: 1.5rem;
        }
        .reset {
          border: 2px solid #f55;
          color: #f55;
          background: #fff;
          box-sizing: border-box;
        }
        .ok {
          background: #f55;
          color: #fff;
        }
      }
    }
  }
}
</style>